<%--
*@Description 
*@Author KingTeng
*@Date 2022/3/8
*@Time 8:51
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="header.jsp"%>
<%@include file="top.jsp"%>
<script>
    $(function () {
        $("#updateButton").click(function () {
            $.post(
                "foreUUpdate",
                {
                    "id": ${sessionScope.user.id},
                    "name": $("#name").val(),
                    "address": $("#location").val(),
                    "phone":$("#telephone").val(),
                    "age":$("#age").val(),
                    "sex":$("#sex").val()
                },
                function (result) {
                    $("span.rerrorMessage").html("OK");
                    $("div.loginErrorMessageDiv").show();
                },
                "json"
            )
        });
    })


</script>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息管理</title>
    <style type="text/css">
        .top {
            /* 设置宽度高度背景颜色 */
            height: auto;
            /*高度改为自动高度*/
            width: 100%;
            margin-left: 0;
            background: rgb(242, 246, 247);
            position: fixed;
            /*固定在顶部*/
            top: 0;
            /*离顶部的距离为0*/
            margin-bottom: 5px;
        }

        .top-right {
            /* 清除ul标签的默认样式 */
            width: auto;
            /*宽度也改为自动*/
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 90%;
            /* margin-top: 0;          */
            padding: 0;
        }

        .top-right li a {
            color: gray;
        }

        .top-left ul {
            /* 清除ul标签的默认样式 */
            width: auto;
            /*宽度也改为自动*/
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 5%;
            /* margin-top: 0;          */
            padding: 0;
        }

        .top-left li {
            float: left;
            /* 使li内容横向浮动，即横向排列  */
            margin-right: 2%;
            /* 两个li之间的距离*/
            position: relative;
            overflow: hidden;
        }

        .top-left li a {
            /* 设置链接内容显示的格式*/
            display: block;
            /* 把链接显示为块元素可使整个链接区域可点击 */
            color: gray;
            text-align: center;
            padding: 3px;
            overflow: hidden;
            text-decoration: none;
            /* 去除下划线 */
        }

        .top-left li a:hover {
            /* 鼠标选中时背景变为黑色 */
            color: black;
        }

        .top ul li ul {
            /* 设置二级菜单 */
            margin-left: -0.2px;
            background: rgb(242, 246, 247);
            position: relative;
            display: none;
            /* 默认隐藏二级菜单的内容 */
        }

        .top ul li ul li {
            /* 二级菜单li内容的显示 */
            float: none;
            text-align: center;
        }

        .top ul li:hover ul {
            /* 鼠标选中二级菜单内容时 */
            display: block;
        }

        .search {
            -webkit-text-size-adjust: none;
            box-sizing: border-box;
            font-family: Microsoft YaHei, sans-serif;
            padding: 0;
            list-style: none;
            line-height: 1.5em;
            background: #F3F3F3;
            border-radius: 25px;
            width: 50%;
            margin: 0 auto;
            float: left;
            margin-left: 350px;
            margin-top: 10px;
        }

        .concise {

            margin-left: auto;

            margin-right: auto;

            width: 50%;

            /* background: #F7F7F7; */

            padding: 25px 15px 25px 10px;

            font: 12px Georgia, "Times New Roman", Times, serif;

            /* color: #F7F7F7; */

            /* text-shadow: 1px 1px 1px #FFF;

            border: 1px solid #E4E4E4;  */

            position:fixed;
            top:75px;
            right:750px;
        }

        .concise h1 {

            font-size: 25px;

            padding: 0px 0px 10px 40px;

            display: block;

            border-bottom: 1px solid #E4E4E4;

            margin: -10px -15px 30px -10px;
        ;

            color: #888;

        }

        .concise h1>span {

            display: block;

            font-size: 11px;

        }

        .concise label {

            display: block;

            margin: 0px;

        }

        .concise label>span {

            float: left;

            width: 20%;

            text-align: right;

            padding-right: 10px;

            margin-top: 50px;

            color: #888;

        }

        .concise input[type="text"],
        .concise input[type="account"],
        .concise input[type="tel"]
        .concise textarea,
        .concise select {

            border: 1px solid #DADADA;

            color: #888;

            height: 30px;

            margin-bottom: 16px;

            margin-right: 6px;

            margin-top: 35px;

            outline: 0 none;

            padding: 3px 3px 3px 5px;

            width: 70%;

            font-size: 12px;

            line-height: 15px;

            box-shadow: inset 0px 1px 4px #ECECEC;

            -moz-box-shadow: inset 0px 1px 4px #ECECEC;

            -webkit-box-shadow: inset 0px 1px 4px #ECECEC;

        }

        .concise textarea {

            padding: 5px 3px 3px 5px;

        }

        .concise select {


            appearance: none;

            -webkit-appearance: none;

            -moz-appearance: none;

            text-indent: 0.01px;

            text-overflow: '';

            width: 70%;

            height: 35px;

            line-height: 25px;

        }

        .concise textarea {

            height: 100px;

        }

        .concise .button {

            background: #E27575;

            border: none;

            padding: 10px 25px 10px 25px;

            color: #FFF;

            box-shadow: 1px 1px 5px #B6B6B6;

            border-radius: 3px;

            text-shadow: 1px 1px 1px #9E3F3F;

            cursor: pointer;

        }

        .concise .button:hover {

            background: #CF7A7A
        }

        .pic{
            position:absolute;
            left:700px;
            top:75px;
        }
    </style>
</head>

<body>

<div class="pic">
    <img src="${pageContext.request.contextPath}/img/site/test.png" width="800" height="600" >
</div>

<div class="concise">
    <form action="#" method="post" class="concise">
        <h1>系统用户信息录入
            <span>请输入您的信息</span>
        </h1>
        <label>
            <span>姓名 :</span>
            <input id="name" type="text" name="name" value=${sessionScope.user.name} />
        </label>
        <label>
            <span>账号 :</span>
            <input id="account" type="text" name="account" value=${sessionScope.user.account} disabled />
        </label>
        <label>
            <span>地址 :</span>
            <input id="location" type="text" name="location" value=${sessionScope.user.address} />
        </label>
        <label>
            <span>电话 :</span>
            <input id="telephone" type="text" value=${sessionScope.user.phone} />
        </label>
        <label>
            <span>年龄 :</span>
            <input id="age" type="text" value=${sessionScope.user.age} />
        </label>
        <label>
            <span>性别 :</span>

            <select id="sex" type="text">
                <option>---${sessionScope.user.sex}---</option>
                <option>男</option>
                <option>女</option>
            </select>
        </label>

        <label>
            <span>&nbsp;</span>
            <button id="updateButton"  class="button" >更新</button>
        </label>
    </form>


</div>
</body>


</html>
